import { delDictType, getDictTypeList } from "@/api/modules/system/dict";
import { ColumnProps } from "@/components/ProTable/interface";
import OnlineStatus from "@/components/Sansan/OnlineStatus/OnlineStatus";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { showTips, confirm } from "@/utils/util";
import { defineComponent } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import TypeDialog from "./components/typeDialog";
import { ElMessage } from "element-plus";
import DictDataList from "./dict-data-list";
export default defineComponent({
	emits: [],
	setup() {
		// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
		const proTableRef = ref();
		const initParam = reactive({ dictName: "" });
		const dataCallback = (data: any) => {
			return {
				datalist: data.records,
				total: data.total || 0,
				pageIndex: data.current,
				pageSize: data.size
			};
		};
		const getTableList = async (params: any) => {
			return getDictTypeList(params);
		};
		const btnList = ref<any>([]);
		onMounted(async () => {
			// 获取页面按钮权限
			btnList.value = await useAuthButtons();
		});
		const currentItem = ref();
		const clickBtn = async (val: string, scope: any) => {
			switch (val) {
				case "add":
					detailDialog.visible = true;
					detailDialog.title = "新增字典类型";
					currentItem.value = { status: 1 };
					break;
				case "del":
					if (scope.selectList.length == 0) return ElMessage.error("至少选择一条数据操作");
					confirm({ content: "是否删除当前选择的记录？" }).then(async flag => {
						if (!flag) {
							return;
						}
						let { code } = await delDictType({ ids: scope.selectList.map((item: any) => item.id) });
						let ok = showTips(code, "删除字典类型");
						if (ok) {
							proTableRef.value.reset();
						}
					});
					break;
				case "mod":
					detailDialog.visible = true;
					detailDialog.title = "编辑字典类型";
					currentItem.value = scope;
					break;
			}
		};

		// 表格配置项
		const columns: ColumnProps[] = [
			{ type: "selection", fixed: "left", width: "auto" },
			{ prop: "dictName", label: "类型名称" },
			{ prop: "status", label: "状态", width: 100 },
			{ prop: "operation", label: "操作", fixed: "right", width: 130 }
		];

		const detailDialog = reactive({ visible: false, title: "新增字典类型" });
		const state = reactive({
			searchParam: {} as any,
			searchColumns: [
				{ key: "dictName", label: "字典名称" },
				{ key: "dictType", label: "字典类型" }
			]
		});
		const currentDictType = ref({});
		return () => {
			return (
				<div>
					<TypeDialog
						v-model:visible={detailDialog.visible}
						title={detailDialog.title}
						detail={currentItem.value}
						onSubmit={() => {
							detailDialog.visible = false;
							proTableRef.value.reset();
						}}
					></TypeDialog>
					<div class="flex">
						<div class="w-2/6">
							<ProTable
								ref={proTableRef}
								title={btnList.value.length ? "" : "字典类型"}
								columns={columns}
								requestApi={getTableList}
								dataCallback={dataCallback}
								initParam={state.searchParam}
								toolButton={false}
								custSearch
								onClickRow={(val: any) => (currentDictType.value = val)}
							>
								{{
									headerRightExt: () => {
										return (
											<div class="flex" style="height: 32px;">
												<el-input v-model={initParam.dictName} style="width:200px" placeholder="搜索" />
												<el-button onClick={() => proTableRef.value.getTableList()}>查询</el-button>
											</div>
										);
									},
									tableHeader: (scope: any) => {
										return btnList.value?.map((item: any) => {
											return (
												<el-button onClick={() => clickBtn(item.path, scope)} type={item.btnClass}>
													<i class={`iconfont ${item.icon}`}></i>
													{item.menuName}
												</el-button>
											);
										});
									},
									dictName: (scope: any) => {
										return (
											<el-link type="primary" onClick={() => clickBtn("mod", scope.row)}>
												{scope.row.dictName}
											</el-link>
										);
									},
									status: (scope: any) => {
										return <OnlineStatus v-model={scope.row.status} onlineLabel="正常" offlineLabel="停用" />;
									},
									operation: (scope: any) => {
										return (
											<>
												<el-link type="primary" link class="iconfont iconbx-file" onClick={() => clickBtn("mod", scope.row)}>
													详情
												</el-link>
											</>
										);
									}
								}}
							</ProTable>
						</div>
						<div class="flex-1 pl-4">
							<DictDataList dictType={currentDictType.value}></DictDataList>
						</div>
					</div>
				</div>
			);
		};
	}
});
